<!DOCTYPE HTML>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta th:include="front/fragments :: head(~{::title})">
    <style type="text/css">
        #category-radar {
            width: 100%;
            height: 360px;
        }

        [v-cloak] {
            display: none;
        }

    </style>
    <!--雷达图-->
    <script type="text/javascript" src="/static/front/js/echarts.min.js"></script>
    <!--打字机效果-->
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <script>
        $(function () {
            var typed = new Typed("#subtitle", {
                strings: ['能够通过人传授的智慧来躲避的困难实在少之又少。真正要掌握的，并不是有关某个问题的知识，而是寻找那个问题的方法。那样的东西可不是一朝一夕能掌握过来的'],
                startDelay: 300,
                typeSpeed: 100,
                loop: true,
                backSpeed: 50,
                showCursor: true
            });
        });
    </script>
</head>


<body>
<!--header-->
<header th:replace="front/fragments :: header"></header>
<!--end header-->

<!--bgcover-->
<div th:replace="front/fragments :: bgcover"></div>
<!--end bgcover-->

<div id="app">
    <!--content-->
    <main class="content">
        <!--分类云-->
        <div id="category-cloud" class="container chip-container">
            <div class="card">
                <div class="card-content">
                    <div class="tag-title center-align">
                        <i class="fas fa-bookmark"></i>&nbsp;&nbsp;文章分类
                    </div>
                    <!--分类列表-->
                    <div class="tag-chips">
                        <a href="javascript:;" v-for="(cate,index) in categories" :key="cate.id"
                           @click="getArticlesByCategoryId(cate.id, 1)" v-cloak>
                    <span class="chip center-align waves-effect waves-light
                             chip-default" :style="{backgroundColor : cate.color}"
                          :class="{'chip-active' : cate.id == categoryId}">{{cate.name}}
                        <span class="tag-length">{{cate.articleCount}}</span>
                    </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!--分类雷达图-->
        <div class="container" data-aos="fade-up" v-if="articles.length===0">
            <div class="card">
                <div id="category-radar" class="card-content"></div>
            </div>
        </div>
        <!-- 所有文章卡片 -->
        <article class="container articles" id="articleCards">
            <div class="row article-row">
                <div v-for="(article, index) in articles" :key="article.id">
                    <div class="article col s12 m6 l4" data-aos="zoom-in">
                        <div class="card articleCard">
                            <!--卡片上部-->
                            <a :href="'/article/'+article.id" target="_blank">
                                <div class="card-image">
                                    <!--文章图片-->
                                    <img class="responsive-img lazy" src="https://cdn.jsdelivr.net/gh/geek-cy/img/blog/miku.jpg"
                                         :data-src="article.cover">
                                    <!--文章标题-->
                                    <span class="card-title">{{article.title}}</span>
                                </div>
                            </a>
                            <!--卡片下部-->
                            <div class="card-content article-content">
                                <!--文章描述-->
                                <div class="summary block-with-text">{{article.summary}}</div>
                                <!--文章信息-->
                                <div class="publish-info">
                                    <!--发布日期-->
                                    <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>{{article.createTime | dateFormat}}
                                </span>
                                    <!--文章分类-->
                                    <span class="publish-author">
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                <a class="post-category" :href="'/page/categories?id='+article.category.id">{{article.category.name}}</a>
                            </span>
                                </div>
                            </div>
                            <!--文章标签-->
                            <div class="card-action article-tags">
                                <a :href="'/page/tags?id='+tag.id" v-for="(tag, index) in article.tagList">
                                    <span class="chip bg-color">{{tag.name}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        <!--pagination-->
        <div class="container paging" v-if="articles.length!==0">
            <div class="row">
                <!--左边按钮-->
                <div class="col s4 m4 l4">
                    <a class="left btn-floating btn-large waves-effect waves-light" @click="toPage(current-1)"
                       href="#articleCards" :class="{disabled: current == 1}">
                        <i class="fas fa-angle-left"></i>
                    </a>
                </div>
                <!--分页信息-->
                <div class="page-info col s4 m4 l4">
                    <div class="center-align b-text-gray">{{current}} / {{pages}}</div>
                </div>
                <!--右边按钮-->
                <div class="col s4 m4 l4">
                    <a class="right btn-floating btn-large waves-effect waves-light"
                       @click="toPage(current+1)" href="#articleCards" :class="{disabled: current == pages}">
                        <i class="fas fa-angle-right"></i>
                    </a>
                </div>
            </div>
        </div>
        <!--end pagination-->
    </main>
    <!--end content-->
</div>

<!--Vue-->
<script type="text/javascript">
    let app = new Vue({
        el: '#app',
        data: {
            categories: [],
            colors: ['#D5F5E3', '#E8F8F5', '#82E0AA', '#A3E4D7', '#FEF9E7', '#F9E79F', '#F8C471', '#F9EBEA'],
            articles: [],
            current: 1,
            pages: 1,
            categoryId: null,
        },
        methods: {
            getCategories: function () {
                axios({
                    url: '/categories',
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                }).then((result) => {
                    this.categories = result.data;
                    this.$nextTick(function () {
                        this.initRandomChart(this.categories);
                    })
                })
            },
            initRandomChart: function (data) {
                let radarChart = echarts.init(document.getElementById('category-radar'));
                let indicator = [];
                let value = [];
                let maxValue = data.sort((a, b) => {
                    return b.articleCount - a.articleCount;
                })[0].articleCount;
                $.each(data, function (index, cate) {
                    if (cate.articleCount > maxValue) {
                        maxValue = cate.articleCount;
                    }
                    let category = {};
                    category.name = cate.name;
                    category.max = maxValue;
                    indicator.push(category);
                    value.push(cate.articleCount);
                });

                let option = {
                    title: {
                        left: 'center',
                        text: '文章分类雷达图',
                        textStyle: {
                            fontWeight: 500,
                            fontSize: 22
                        }
                    },
                    tooltip: {},
                    radar: {
                        name: {
                            textStyle: {
                                color: '#3C4858'
                            }
                        },
                        max: 8,
                        indicator: indicator,
                        nameGap: 5,
                        center: ['50%', '55%'],
                        radius: '66%'
                    },
                    series: [{
                        type: 'radar',
                        color: ['#3ecf8e'],
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: [
                            {
                                value: value,
                                name: '文章分类数量'
                            }
                        ]
                    }]
                };
                radarChart.setOption(option);
            },
            getArticlesByCategoryId: function (categoryId, current) {
                axios({
                    url: '/category/' + categoryId + '/articles?current=' + current,
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                }).then((result) => {
                    this.articles = result.data.records;
                    this.current = result.data.current;
                    this.pages = result.data.pages;
                    this.categoryId = categoryId;
                    this.$nextTick(function () {
                        lazyLoadInstance.update();
                    });
                })
            },
            toPage: function (page) {
                if (page >= 1 && page <= this.pages) {
                    this.current = page;
                    this.getArticlesByCategoryId(this.categoryId, page);
                    $(window).scrollTo('#articleCards', 1000);
                }
            },
            getQueryString: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return decodeURI(r[2]);
                return null;
            },
        },
        created: function () {
            this.getCategories();
            let cid = this.getQueryString('id');
            if (cid !== null) {
                this.categoryId = cid;
                this.getArticlesByCategoryId(this.categoryId, 1);
            }
        },
        filters: {
            dateFormat: function (value) {
                return moment(value).format("YYYY-MM-DD");
            }
        },
    });
</script>

<!--footer-->
<footer th:replace="front/fragments :: footer"></footer>
<!--end footer-->

<!--commons-->
<div th:replace="front/fragments :: commons"></div>
<!--end commons-->

<!--scripts-->
<div th:replace="front/fragments :: scripts"></div>
<!--end scripts-->
</body>
</html>
